<template>
  <div>
    <br>
<div id="search">
  <el-input
    placeholder="请输入内容"
    v-model="input"
    clearable style="width: 300px;font-size: 18px">
  </el-input>
  <el-button type="primary" icon="el-icon-search" style="background: coral" @click="handleClick(1)">搜索</el-button>
</div>
    <div id="navition">
  <el-tabs v-model="activeName" stretch @tab-click="handleClick">
    <el-tab-pane label="综合" name="first"></el-tab-pane>
    <el-tab-pane label="主播" name="second"></el-tab-pane>
    <el-tab-pane label="直播" name="third"></el-tab-pane>
    <el-tab-pane label="视频" name="fourth"></el-tab-pane>
    <el-tab-pane label="帖子" name="five"></el-tab-pane>
  </el-tabs>
    </div>
    <router-view v-if="isRouterAlive"/>
    </div>
</template>

<script>
export default {
  name: "search",
  provide(){ //提供
    return {
      reload: this.reload
    }
  },
  data(){
    return{
      input: '',
      activeName:'',
      isRouterAlive: true,
      word:''
    }
  },
  methods:{
    reload(){
      this.isRouterAlive = false
      this.$nextTick( function () {
        this.isRouterAlive = true
      })
    },
    handleClick(num){
      if(num==1){
        this.$parent.check(this.input);
        this.word=this.input;
        this.reload();
      }
      if(this.activeName=="second"){
        this.$router.push({name:"showzhubo",params:{word:this.input}});
      }
      else if(this.activeName=="third"){
        this.$router.push({name:"showlive",params:{word:this.input}});
      }else if(this.activeName=="fourth"){
        this.$router.push({name:"showvideo",params:{word:this.input}});
      }else if(this.activeName=="first"){
        this.$router.push({name:"showmultiple",params:{word:this.input}});

      }else{
        this.$router.push({name:"shownote",params:{word:this.input}});
      }
    }
  },
  mounted(){
    this.input=this.$route.params.content
    this.$router.push({name:"showmultiple",params:{word:this.input}});
  }
}
</script>

<style>
#search{
  width: 400px;
  height: 70px;
  margin: auto;
}
#navition{

}

.el-tabs__item {
  font-size: 20px !important;
  padding: 10px 0 50px !important;
  width: 120px !important;
}
/*.el-tabs__nav-wrap*/
/*.el-tabs__nav-scroll*/
/*.el-tabs__nav {*/
/*  width: 100%;*/
/*  display: flex;*/
/*  justify-content: space-around;*/
/*}*/
</style>
